<template>
  <div class="home-container">
    <!-- 顶部青色导航栏 -->
    <header class="top-header">
      <div class="top-header-content">
        <div class="top-header-left">
          <div class="logo-white">BOSS直聘</div>
          <span class="location-text">北京 <span class="switch-text">[切换]</span></span>
          <nav class="top-nav-links">
            <span class="top-nav-item">首页</span>
            <span class="top-nav-item">职位</span>
            <span class="top-nav-item">公司</span>
            <span class="top-nav-item">校园·海归</span>
            <span class="top-nav-item">APP</span>
            <span class="top-nav-item">有了</span>
            <span class="top-nav-item">海外</span>
            <span class="top-nav-item">无障碍专区</span>
          </nav>
        </div>
        <div class="top-header-right">
          <span class="top-header-icon">消息</span>
          <span class="top-header-icon">简历</span>
          <span class="top-header-icon user-name">淼淼</span>
          <div class="user-avatar">
            <el-icon><User /></el-icon>
          </div>
        </div>
      </div>
    </header>

    <!-- 搜索栏区域 -->
    <div class="search-section">
      <div class="search-section-content">
        <div class="search-bar">
          <el-select v-model="searchType" placeholder="职位类型" class="search-select-type">
            <el-option label="职位类型" value="position" />
          </el-select>
          <el-input
            v-model="searchKeyword"
            placeholder="搜索职位、公司"
            class="search-input-main"
            @keyup.enter="handleSearch"
          />
          <el-button class="map-btn">
            <el-icon><MapLocation /></el-icon>
            <span>地图</span>
          </el-button>
          <el-button type="primary" class="search-btn-main" @click="handleSearch">搜索</el-button>
        </div>
        <div class="hot-tags">
          <span class="tag-label">热门职位:</span>
          <span
            v-for="tag in hotTags"
            :key="tag"
            class="hot-tag"
            @click="searchTag(tag)"
          >
            {{ tag }}
          </span>
        </div>
      </div>
    </div>

    <!-- 主体内容区域 -->
    <div class="main-content">
      <!-- 左侧职位分类 + 右侧弹窗内容 -->
      <div class="category-section">
        <!-- 左侧职位分类面板 -->
        <div class="category-panel">
          <!-- 职位分类列表 -->
          <div class="category-list">
            <div
              v-for="category in topCategories"
              :key="category.id"
              class="category-item"
              @mouseenter="handleCategoryHover(category)"
              @mouseleave="handleCategoryLeave"
            >
              <div class="category-row">
                <span class="category-name">{{ category.position_type }}</span>
                <div class="category-sub-items">
                  <span
                    v-for="(subCategory, index) in getFirstThreeSubCategories(category)"
                    :key="subCategory.id"
                    class="sub-category-tag"
                  >
                    {{ subCategory.position_type }}
                  </span>
                </div>
                <el-icon v-if="category.children && category.children.length > 0" class="arrow-icon">
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
          
          <!-- 分页 -->
          <div class="category-pagination">
            <el-button class="page-btn" @click="prevPage" :disabled="currentPage === 1">
              <el-icon><ArrowLeft /></el-icon>
            </el-button>
            <span class="page-info">{{ currentPage }}/{{ totalPages }}</span>
            <el-button class="page-btn" @click="nextPage" :disabled="currentPage === totalPages">
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
        </div>

        <!-- 右侧弹窗内容区域 -->
        <div 
          class="category-popup-area"
          @mouseenter="keepPopupOpen = true"
          @mouseleave="handlePopupLeave"
        >
          <!-- 详细分类弹窗（图4）- 鼠标悬停时显示 -->
          <div v-if="showCategoryDetail && hoveredCategoryDetail.length > 0" class="category-detail-popup">
            <div class="detail-category-list">
              <div
                v-for="level2Category in hoveredCategoryDetail"
                :key="level2Category.id"
                class="detail-category-group"
              >
                <div class="detail-category-title">{{ level2Category.position_type }}</div>
                <div class="detail-category-items">
                  <span
                    v-for="level3Category in (level2Category.children || [])"
                    :key="level3Category.id"
                    class="detail-category-item"
                  >
                    {{ level3Category.position_type }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 广告卡片弹窗（图5）- 默认显示或鼠标离开时显示 -->
          <div v-show="!showCategoryDetail || hoveredCategoryDetail.length === 0" class="ad-content-area">
          <!-- 顶部横幅广告 -->
          <div class="top-banner">
            <div class="banner-content">
              <div class="banner-title">成都高新区天府人才行动暨天府软件园 2025年秋季招聘校园行</div>
              <div class="banner-subtitle">主办：成都高新区管委会 | 承办：天府软件园</div>
            </div>
            <div class="banner-logo">新光荷</div>
          </div>

          <!-- 广告卡片区域 -->
          <div class="ad-cards">
            <!-- 左侧广告列 -->
            <div class="ad-column">
              <div class="ad-card purple">
                <div class="ad-card-title">直聘简历</div>
                <div class="ad-card-content">
                  <div class="ad-main-text">写好简历 找好工作</div>
                  <div class="ad-sub-text">免费设计 | 海量模板 | 智能润色</div>
                </div>
              </div>
              <div class="ad-card purple-pink">
                <div class="ad-card-title">算法解决一切</div>
                <div class="ad-card-subtitle">算法工程师职位精选</div>
              </div>
            </div>

            <!-- 右侧广告列 -->
            <div class="ad-column">
              <div class="ad-card blue">
                <div class="ad-card-title">最前端有"钱"途</div>
                <div class="ad-card-subtitle">Web前端工程师岗位热推</div>
                <div class="ad-badge">广告</div>
              </div>
              <div class="ad-card blue-pink">
                <div class="ad-card-title">挑战最高年薪</div>
                <div class="ad-card-subtitle">Java工程师职位精选</div>
                <div class="ad-badge">广告</div>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>

      <!-- 热门职位区域 -->
      <div class="hot-jobs-section">
        <h2 class="section-title">热招职位</h2>
        <div class="job-tabs">
          <span
            v-for="tab in jobTabs"
            :key="tab"
            :class="['job-tab', { active: activeTab === tab }]"
            @click="activeTab = tab"
          >
            {{ tab }}
          </span>
        </div>
        <div class="job-list">
          <div v-for="job in hotJobs" :key="job.id" class="job-card">
            <div class="job-header">
              <span class="job-title">{{ job.title }}</span>
              <span class="job-status">在线</span>
            </div>
            <div class="job-salary">{{ job.salary }}</div>
            <div class="job-info">
              <span>{{ job.location }}</span>
              <span>{{ job.experience }}</span>
              <span>{{ job.education }}</span>
            </div>
            <div class="job-skills">
              <span v-for="skill in job.skills" :key="skill" class="skill-tag">{{ skill }}</span>
            </div>
            <div class="job-company">
              <span class="company-name">{{ job.company }}</span>
              <span class="company-tag">{{ job.industry }}</span>
            </div>
          </div>
        </div>
        <div class="view-more">
          <el-button type="primary" plain>查看更多</el-button>
        </div>
      </div>

      <!-- 热门企业区域 -->
      <div class="hot-companies-section">
        <h2 class="section-title">热门企业</h2>
        <div class="company-list">
          <div v-for="company in hotCompanies" :key="company.id" class="company-card">
            <div class="company-header">
              <img v-if="company.name !== '字节跳动' && company.name !== '美团'" :src="company.logo" :alt="company.name" class="company-logo" />
              <div v-else-if="company.name === '字节跳动'" class="company-logo bytedance-logo" v-html="getByteDanceLogo()"></div>
              <div v-else-if="company.name === '美团'" class="company-logo meituan-logo" v-html="getMeituanLogo()"></div>
              <div class="company-info">
                <div class="company-name">{{ company.name }}</div>
                <div class="company-status">
                  {{ company.status }} | {{ company.size }} | {{ company.industry }}
                </div>
              </div>
            </div>
            <div class="company-jobs">
              <div v-for="job in company.jobs" :key="job.id" class="company-job-item">
                <div class="company-job-title">{{ job.title }}</div>
                <div class="company-job-salary">{{ job.salary }}</div>
                <div class="company-job-info">
                  {{ job.location }} {{ job.schedule }} {{ job.duration }} {{ job.education }}
                </div>
              </div>
            </div>
            <div class="view-more-jobs">
              <el-button type="primary" plain size="small">查看更多职位</el-button>
            </div>
          </div>
        </div>
        <div class="view-more">
          <el-button type="primary" plain>查看更多</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { ArrowRight, ArrowLeft, User, MapLocation } from '@element-plus/icons-vue'
import { homeAPI } from '@/api/index'
import { ElMessage } from 'element-plus'

// 搜索相关
const searchType = ref('position')
const searchKeyword = ref('')
const hotTags = ref(['Python', '数据采集', '全栈工程师', '机器学习', '深度学习', '数据挖掘', 'Golang'])

// 职位分类相关
const categories = ref([])
const topCategories = ref([])
const currentPage = ref(1)
const pageSize = ref(10)

// 悬停弹窗相关
const showCategoryDetail = ref(false)
const hoveredCategoryDetail = ref([])
const keepPopupOpen = ref(false)
const hoverTimer = ref(null)

// 字节跳动Logo生成函数
const getByteDanceLogo = () => {
  return `
    <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
      <!-- 四个垂直矩形，从深蓝到浅青色渐变，模拟字节跳动Logo -->
      <!-- 第一个矩形：最高，深蓝色 -->
      <rect x="6" y="4" width="9" height="24" fill="#1E3A8A" rx="1"/>
      <!-- 第二个矩形：中高，中蓝色 -->
      <rect x="17" y="6" width="9" height="22" fill="#2563EB" rx="1"/>
      <!-- 第三个矩形：较矮，青色 -->
      <rect x="28" y="8" width="9" height="20" fill="#06B6D4" rx="1"/>
      <!-- 第四个矩形：最高（与第一个相似），浅青色 -->
      <rect x="39" y="4" width="9" height="24" fill="#67E8F9" rx="1"/>
      <!-- ByteDance文字 -->
      <text x="30" y="38" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="6.5" font-weight="bold" fill="#1E3A8A" text-anchor="middle">ByteDance</text>
      <!-- 字节跳动文字 -->
      <text x="30" y="48" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="5.5" font-weight="bold" fill="#1E3A8A" text-anchor="middle">字节跳动</text>
    </svg>
  `
}

// 美团Logo生成函数
const getMeituanLogo = () => {
  return `
    <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
      <!-- 黄色背景圆角矩形 -->
      <rect width="60" height="60" rx="8" fill="#FFD100"/>
      <!-- 美团文字 -->
      <text x="30" y="38" font-family="'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif" font-size="20" font-weight="bold" fill="#000000" text-anchor="middle">美团</text>
    </svg>
  `
}

// 热门职位和企业的固定数据（图3内容固定死）
const activeTab = ref('技术')
const jobTabs = ref(['技术', '销售', '供应链/物流', '人力/财务/行政', '服务业', '客服/运营', '直播/影视/传媒', '市场/公关/广告', '金融'])

const hotJobs = ref([
  {
    id: 1,
    title: '售前/售后技术支持工程师',
    salary: '9-14K',
    location: '北京',
    experience: '1-3年',
    education: '本科',
    skills: ['售前技术支持经验', 'Java', 'SpringCloud'],
    company: '超越同创',
    industry: '进出口贸易'
  },
  {
    id: 2,
    title: 'Java开发工程师',
    salary: '11-20K-14薪',
    location: '北京',
    experience: '1年以内',
    education: '本科',
    skills: ['Java', 'MySQL'],
    company: 'C是点云',
    industry: '企业服务 已上市'
  },
  {
    id: 3,
    title: 'Java开发(银行+项目长...)',
    salary: '15-22K',
    location: '北京',
    experience: '3-5年',
    education: '本科',
    skills: ['Java', 'SpringCloud'],
    company: '软通动力',
    industry: '计算机软件 已上市'
  },
  {
    id: 4,
    title: '测试工程师',
    salary: '9-14K',
    location: '北京',
    experience: '3-5年',
    education: '本科',
    skills: ['Java', '测试工作经验'],
    company: '中电全信',
    industry: '计算机软件'
  },
  {
    id: 5,
    title: 'JAVA工程师-水滴项目',
    salary: '15-16K',
    location: '北京',
    experience: '3-5年',
    education: '大专',
    skills: ['Java', 'Spring'],
    company: '聚人动力',
    industry: '计算机软件 不需要融资'
  },
  {
    id: 6,
    title: '中高级Java(通过率高长...)',
    salary: '15-18K',
    location: '北京',
    experience: '5-10年',
    education: '本科',
    skills: ['Java', '微服务经验'],
    company: '长亮科技',
    industry: '计算机软件 已上市'
  }
])

const hotCompanies = ref([
  {
    id: 1,
    name: '字节跳动',
    logo: 'https://via.placeholder.com/60',
    status: 'D轮及以上',
    size: '10000人以上',
    industry: '互联网',
    jobs: [
      {
        id: 1,
        title: 'hr招聘实习生',
        salary: '150-200元/天',
        location: '北京海淀区中关村',
        schedule: '5天/周',
        duration: '3个月',
        education: '本科'
      },
      {
        id: 2,
        title: '产品运营',
        salary: '22-35K-15薪',
        location: '北京朝阳区望京',
        schedule: '',
        duration: '',
        education: '1-3年 本科'
      },
      {
        id: 3,
        title: '服务运营-豆包',
        salary: '25-35K-15薪',
        location: '北京',
        schedule: '',
        duration: '',
        education: '本科'
      }
    ]
  },
  {
    id: 2,
    name: '美团',
    logo: 'https://via.placeholder.com/60',
    status: '不需要融资',
    size: '10000人以上',
    industry: '互联网',
    jobs: [
      {
        id: 1,
        title: '下沉市场-校园业务运营',
        salary: '20-35K-15薪',
        location: '北京',
        schedule: '',
        duration: '',
        education: '本科'
      },
      {
        id: 2,
        title: 'c端用户产运',
        salary: '15-30K-15薪',
        location: '北京',
        schedule: '',
        duration: '',
        education: '本科'
      },
      {
        id: 3,
        title: '招2个会点电脑的水产员...',
        salary: '8-9K',
        location: '北京',
        schedule: '',
        duration: '',
        education: '经验不限'
      }
    ]
  },
  {
    id: 3,
    name: '京东集团',
    logo: 'https://globalimg.sucai999.com/preimg/E625C8/700/E625C8/148/1fa4334be89e2277a7089cc4cf7a9.jpg?x-oss-process=image/resize,w_320',
    status: '已上市',
    size: '10000人以上',
    industry: '电子商务',
    jobs: [
      {
        id: 1,
        title: '产品实习生-北京',
        salary: '300-350元/天',
        location: '北京',
        schedule: '5天/周',
        duration: '3个月',
        education: '本科'
      },
      {
        id: 2,
        title: '客服',
        salary: '6-8K-13薪',
        location: '北京',
        schedule: '',
        duration: '',
        education: '大专'
      },
      {
        id: 3,
        title: '供应链管理实习生',
        salary: '150-200元/天',
        location: '北京',
        schedule: '4天/周',
        duration: '3个月',
        education: '本科'
      }
    ]
  },
  {
    id: 4,
    name: '小米',
    logo: 'https://ts2.tc.mm.bing.net/th/id/OIP-C.BK2BjcAwmQgasY-6JC8GkwHaHa?rs=1&pid=ImgDetMain&o=7&rm=3',
    status: '已上市',
    size: '10000人以上',
    industry: '互联网',
    jobs: [
      {
        id: 1,
        title: '小米汽车-总装技师(全国)',
        salary: '8-11K-15薪',
        location: '北京',
        schedule: '',
        duration: '',
        education: '大专'
      },
      {
        id: 2,
        title: 'HRBP(全国轮岗)',
        salary: '15-30K',
        location: '北京',
        schedule: '',
        duration: '',
        education: '本科'
      },
      {
        id: 3,
        title: '财务成本会计',
        salary: '15-30K-15薪',
        location: '北京',
        schedule: '',
        duration: '',
        education: '本科'
      }
    ]
  },
  {
    id: 5,
    name: '快手',
    logo: 'https://www.manpingou.com/uploads/allimg/211125/25-21112510200M36.jpg',
    status: '已上市',
    size: '10000人以上',
    industry: '社交网络与媒体',
    jobs: [
      {
        id: 1,
        title: '产品实习生(急招)',
        salary: '200-250元/天',
        location: '北京',
        schedule: '5天/周',
        duration: '3个月',
        education: '本科'
      },
      {
        id: 2,
        title: '【大量招】测试开发工程师',
        salary: '35-65K-16薪',
        location: '北京',
        schedule: '',
        duration: '',
        education: '3-5年 本科'
      },
      {
        id: 3,
        title: '【急招】数字人生成',
        salary: '50-80K-16薪',
        location: '北京',
        schedule: '',
        duration: '',
        education: '本科'
      }
    ]
  },
  {
    id: 6,
    name: '百度',
    logo: 'https://ts1.tc.mm.bing.net/th/id/R-C.fc5ccdd63ae4b03a635f8a109f466186?rik=Wkxg01Er%2bZJoKA&riu=http%3a%2f%2fpro.statics.logoqs.techuangyi.com%2f2018%2f10%2f10%2f7addb4d22192a9f65cc953d004c8c59d.jpg&ehk=gesP%2fELE1p%2f%2fL9tEpXMvDN1z8GmHflnc4NKi3075ruE%3d&risl=&pid=ImgRaw&r=0',
    status: '已上市',
    size: '10000人以上',
    industry: '互联网',
    jobs: [
      {
        id: 1,
        title: 'AI高级运营经理',
        salary: '30-45K-15薪',
        location: '北京',
        schedule: '',
        duration: '',
        education: '5-10年 本科'
      },
      {
        id: 2,
        title: 'PMO项目管理实习生',
        salary: '150-200元/天',
        location: '北京',
        schedule: '5天/周',
        duration: '3个月',
        education: '本科'
      }
    ]
  }
])

// 计算总页数
const totalPages = computed(() => {
  const total = Math.ceil(categories.value.length / pageSize.value)
  return total > 0 ? total : 1
})

// 获取职位分类数据
const fetchPositionTypes = async () => {
  try {
    const response = await homeAPI.getPositionType({ parent_id: null })
    // 处理分页响应
    let level1Categories = []
    
    if (response.results) {
      level1Categories = response.results
    } else if (Array.isArray(response)) {
      level1Categories = response
    }
    
    // 获取每个一级分类的子分类（用于显示在图2样式中）
    const categoriesWithChildren = await Promise.all(
      level1Categories.map(async (category) => {
        try {
          const childrenResponse = await homeAPI.getPositionType({ parent_id: category.id })
          let children = []
          
          if (childrenResponse.results) {
            children = childrenResponse.results
          } else if (Array.isArray(childrenResponse)) {
            children = childrenResponse
          }
          
          return {
            ...category,
            children: children
          }
        } catch (error) {
          console.error(`获取子分类失败 (parent_id: ${category.id}):`, error)
          return {
            ...category,
            children: []
          }
        }
      })
    )
    
    categories.value = categoriesWithChildren
    updateTopCategories()
  } catch (error) {
    console.error('获取职位分类失败:', error)
    const errorMessage = error.message || '获取职位分类失败'
    ElMessage.error(errorMessage)
    // 使用默认数据
    categories.value = []
  }
}

// 更新显示的顶级分类
const updateTopCategories = () => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  topCategories.value = categories.value.slice(start, end)
}

// 获取前三个子分类（用于显示在图2样式中）
const getFirstThreeSubCategories = (category) => {
  if (!category.children || category.children.length === 0) {
    return []
  }
  return category.children.slice(0, 3)
}

// 处理分类悬停
const handleCategoryHover = async (category) => {
  // 清除之前的定时器
  if (hoverTimer.value) {
    clearTimeout(hoverTimer.value)
    hoverTimer.value = null
  }
  
  keepPopupOpen.value = true
  
  try {
    // 获取二级分类数据
    const response = await homeAPI.getPositionType({ parent_id: category.id })
    let level2Categories = []
    
    if (response.results) {
      level2Categories = response.results
    } else if (Array.isArray(response)) {
      level2Categories = response
    }
    
    // 获取每个二级分类的三级分类
    const level2WithChildren = await Promise.all(
      level2Categories.map(async (level2) => {
        try {
          const level3Response = await homeAPI.getPositionType({ parent_id: level2.id })
          let level3Categories = []
          
          if (level3Response.results) {
            level3Categories = level3Response.results
          } else if (Array.isArray(level3Response)) {
            level3Categories = level3Response
          }
          
          return {
            ...level2,
            children: level3Categories
          }
        } catch (error) {
          console.error(`获取三级分类失败 (parent_id: ${level2.id}):`, error)
          return {
            ...level2,
            children: []
          }
        }
      })
    )
    
    hoveredCategoryDetail.value = level2WithChildren
    showCategoryDetail.value = true
  } catch (error) {
    console.error('获取分类详情失败:', error)
    const errorMessage = error.message || '获取分类详情失败'
    ElMessage.error(errorMessage)
    hoveredCategoryDetail.value = []
    showCategoryDetail.value = true
  }
}

// 处理分类离开
const handleCategoryLeave = () => {
  keepPopupOpen.value = false
  // 延迟隐藏，避免鼠标移动到弹窗时立即隐藏
  hoverTimer.value = setTimeout(() => {
    if (!keepPopupOpen.value) {
      showCategoryDetail.value = false
      hoveredCategoryDetail.value = []
    }
  }, 100)
}

// 处理弹窗离开
const handlePopupLeave = () => {
  keepPopupOpen.value = false
  hoverTimer.value = setTimeout(() => {
    if (!keepPopupOpen.value) {
      showCategoryDetail.value = false
      hoveredCategoryDetail.value = []
    }
  }, 100)
}

// 翻页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    updateTopCategories()
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    updateTopCategories()
  }
}

// 搜索相关
const handleSearch = () => {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词')
    return
  }
  console.log('搜索:', searchType.value, searchKeyword.value)
  // 这里可以调用搜索API
}

const searchTag = (tag) => {
  searchKeyword.value = tag
  handleSearch()
}

// 初始化
onMounted(() => {
  fetchPositionTypes()
})

// 组件卸载时清理定时器
onUnmounted(() => {
  if (hoverTimer.value) {
    clearTimeout(hoverTimer.value)
    hoverTimer.value = null
  }
})
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部青色导航栏 */
.top-header {
  background-color: #20b9b9;
  color: #fff;
}

.top-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo-white {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

.location-text {
  font-size: 14px;
  cursor: pointer;
}

.switch-text {
  font-size: 12px;
  opacity: 0.8;
}

.top-nav-links {
  display: flex;
  gap: 20px;
  margin-left: 20px;
}

.top-nav-item {
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  transition: opacity 0.3s;
}

.top-nav-item:hover {
  opacity: 0.8;
}

.top-header-right {
  display: flex;
  gap: 20px;
  align-items: center;
}

.top-header-icon {
  cursor: pointer;
  color: #fff;
  font-size: 14px;
}

.user-name {
  margin-right: 5px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 搜索栏区域 */
.search-section {
  background-color: #f0f0f0;
  padding: 20px 0;
}

.search-section-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
}

.search-select-type {
  width: 140px;
}

.search-input-main {
  flex: 1;
  max-width: 600px;
}

.map-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 15px;
}

.search-btn-main {
  padding: 10px 40px;
  font-size: 16px;
}

.hot-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tag-label {
  color: #666;
  font-size: 12px;
}

.hot-tag {
  padding: 4px 12px;
  background-color: #1890ff;
  color: #fff;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.hot-tag:hover {
  background-color: #40a9ff;
}

/* 主体内容 */
.main-content {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

/* 分类区域 */
.category-section {
  display: flex;
  align-items: stretch;
  gap: 20px;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.category-panel {
  flex: 0 0 280px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.category-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.category-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.category-item:last-child {
  border-bottom: none;
}

.category-item:hover {
  background-color: #f5f5f5;
}

.category-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  min-width: 100px;
}

.category-sub-items {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.sub-category-tag {
  font-size: 12px;
  color: #666;
  cursor: pointer;
  transition: color 0.2s;
}

.sub-category-tag:hover {
  color: #1890ff;
}

.arrow-icon {
  font-size: 12px;
  color: #999;
  margin-left: auto;
}

.category-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

.page-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.page-btn:hover:not(:disabled) {
  border-color: #1890ff;
  color: #1890ff;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  color: #666;
  margin: 0 5px;
}

/* 右侧弹窗内容区域 */
.category-popup-area {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.category-detail-popup {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
  overflow-y: auto;
}

.detail-category-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.detail-category-group {
  margin-bottom: 0;
}

.detail-category-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-category-group:last-child {
  margin-bottom: 0;
}

.detail-category-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-category-item {
  font-size: 13px;
  color: #666;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s, background-color 0.2s;
  box-sizing: border-box;
  display: inline-block;
  width: auto;
  height: auto;
}

.detail-category-item:hover {
  color: #1890ff;
  background-color: #f0f7ff;
}

/* 右侧广告内容区域 */
.ad-content-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.top-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  padding: 30px;
  color: #fff;
  position: relative;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.banner-content {
  flex: 1;
}

.banner-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.banner-subtitle {
  font-size: 14px;
  opacity: 0.9;
}

.banner-logo {
  font-size: 14px;
  opacity: 0.8;
}

.ad-cards {
  display: flex;
  gap: 15px;
  flex: 1;
}

.ad-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ad-card {
  border-radius: 8px;
  padding: 20px;
  flex: 1;
  width: 100%;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ad-card.purple {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  color: #fff;
}

.ad-card.purple-pink {
  background: linear-gradient(135deg, #9b59b6 0%, #e91e63 100%);
  color: #fff;
}

.ad-card.blue {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: #fff;
}

.ad-card.blue-pink {
  background: linear-gradient(135deg, #3498db 0%, #e91e63 100%);
  color: #fff;
}

.ad-card.orange-red {
  background: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%);
  color: #fff;
}

.ad-card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.ad-card-content {
  margin-top: 10px;
}

.ad-main-text {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.ad-sub-text {
  font-size: 12px;
  opacity: 0.9;
}

.ad-card-subtitle {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 5px;
}

.ad-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 11px;
}

/* 热门职位区域 */
.hot-jobs-section {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
  margin-bottom: 20px;
}

.token-info {
  margin-top: 20px;
}

.token-status {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid;
  background-color: #f9f9f9;
}

.token-status.valid {
  border-color: #67c23a;
  background-color: #f0f9ff;
}

.token-status.invalid {
  border-color: #f56c6c;
  background-color: #fef0f0;
}

.status-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
  margin-right: 12px;
}

.token-status.valid .status-icon {
  background-color: #67c23a;
  color: white;
}

.token-status.invalid .status-icon {
  background-color: #f56c6c;
  color: white;
}

.status-text {
  flex: 1;
}

.status-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.token-status.valid .status-title {
  color: #67c23a;
}

.token-status.invalid .status-title {
  color: #f56c6c;
}

.status-detail {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.5;
}

.token-preview {
  font-size: 12px;
  color: #999;
  font-family: 'Courier New', monospace;
  margin-top: 8px;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  word-break: break-all;
}

.job-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.job-tab {
  padding: 8px 16px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
  margin-bottom: -12px;
}

.job-tab:hover {
  color: #1890ff;
}

.job-tab.active {
  color: #1890ff;
  border-bottom-color: #1890ff;
}

.job-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.job-card {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
}

.job-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.job-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.job-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.job-status {
  padding: 2px 8px;
  background-color: #52c41a;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
}

.job-salary {
  font-size: 18px;
  font-weight: bold;
  color: #f5222d;
  margin-bottom: 10px;
}

.job-info {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.job-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.skill-tag {
  padding: 4px 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.job-company {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.company-name {
  font-size: 14px;
  color: #333;
}

.company-tag {
  padding: 2px 8px;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 4px;
  font-size: 12px;
}

.view-more {
  text-align: center;
  margin-top: 20px;
}

/* 热门企业区域 */
.hot-companies-section {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.company-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.company-card {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  transition: all 0.3s;
}

.company-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.company-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.company-logo {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: contain;
  background-color: #f5f5f5;
}

.bytedance-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
}

.bytedance-logo svg {
  width: 100%;
  height: 100%;
}

.meituan-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}

.meituan-logo svg {
  width: 100%;
  height: 100%;
}

.company-info {
  flex: 1;
}

.company-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.company-status {
  font-size: 12px;
  color: #666;
}

.company-jobs {
  margin-bottom: 15px;
}

.company-job-item {
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.company-job-item:last-child {
  border-bottom: none;
}

.company-job-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.company-job-salary {
  font-size: 16px;
  color: #f5222d;
  font-weight: bold;
  margin-bottom: 5px;
}

.company-job-info {
  font-size: 12px;
  color: #999;
}

.view-more-jobs {
  text-align: center;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}
</style>